<template>
	<view class="scroll-view-container" v-if="cateGoryList.length">
		<view class="left-scroll-view">
			<view :class="['left-scroll-view-item', cateIndex === index?'active':'']"
				v-for="(item,index) in cateGoryList" :key="item.cat_id" @click="change(index)">
				{{ item.cat_name}}
			</view>
		</view>
		<view class="right-scroll-view">
			<!-- 二级分类 -->
			<view v-for="item in lv2List" :key="item.cat_id" v-if="lv2List">
				<view class="cate-lv2-title">{{item.cat_name}}</view>
				<!-- 三级标题和三级分类 -->
				<view class="cate-lv3-list">
					<view class="cate-lv3-item" v-for="subItem in item.children" :key="subItem.cat_id">
						<image :src="subItem.cat_icon" mode="" />
						<view class="name">{{subItem.cat_name}}</view>
					</view>
				</view>
			</view>
			<van-empty v-else description="暂无二级分类" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { getCategroyList } from '../../api/catgory'
	import { CateGory } from "../../types/cateGory";
	import { useTabBarBadge, useSetTabBarItem } from '../../hooks/index'

	useTabBarBadge()
	useSetTabBarItem()

	const cateGoryList = ref([] as CateGory[]) //一级数据列表
	const lv2List = ref([] as CateGory[]) // 二三级数据
	const cateIndex = ref(0) // 高亮索引

	// 获取分类数据总列表
	const getCateGoryListData = async () => {
		const res = await getCategroyList()
		cateGoryList.value = res.data
		// 给右边的二三级数据初试著，初始值为0索引的数据
		lv2List.value = cateGoryList.value[cateIndex.value].children
	}
	getCateGoryListData()

	const change = (index : number) => {
		cateIndex.value = index
		lv2List.value = cateGoryList.value[cateIndex.value].children
		console.log(lv2List.value);
	}
</script>

<style lang="scss" scoped>
	.scroll-view-container {
		display: flex;
		height: 100%;

		.left-scroll-view {
			width: 120px;
			height: 100vh;
			overflow: auto;

			.left-scroll-view-item {
				line-height: 60px;
				background-color: #f7f7f7;
				text-align: center;
				font-size: 12px;

				// 激活项的样式
				&.active {
					background-color: #ffffff;
					position: relative;
					color: #c00000;
				}
			}
		}

		// 去除滚动条
		.left-scroll-view::-webkit-scrollbar {
			width: 0 !important;
		}

		.right-scroll-view {
			height: 100vh;
			overflow: auto;
			flex: 1;

			.cate-lv2-title {
				font-size: 12px;
				font-weight: bold;
				padding: 15px 15px;
			}

			.cate-lv3-list {
				display: flex;
				flex-wrap: wrap;

				.cate-lv3-item {
					width: 33.33%;
					margin-bottom: 10px;
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 120rpx;
						height: 120rpx;
					}

					.name {
						font-size: 12px;
						color: gray;
					}
				}
			}
		}

		// 去除滚动条
		.right-scroll-view::-webkit-scrollbar {
			width: 0 !important;
		}
	}
</style>